import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import React from 'react'
import { Image, StyleSheet, View } from 'react-native'
import Mine from '../mine/Mine'
import Home from '../home/Home'
import Shop from '../shop/Shop'
import Message from '../message/Message'
import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';
import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';
import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';
import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';
import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';
import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';
import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';
import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';
import TabItem from './components/TabItem'

const BottomTab = createBottomTabNavigator()
export default function Tabs() {
  return (
    <View style={styles.root}>
      <BottomTab.Navigator
        // bottom tab  组件构建tabbar
        // screenOptions={({ route }) => {
        //   return {
        //     tabBarIcon: ({ focused, color, size }) => {
        //       let img;
        //       if (route.name === 'Home') {
        //         img = focused ? icon_tab_home_normal : icon_tab_home_selected
        //       }
        //       if (route.name === 'Shop') {
        //         img = focused ? icon_tab_shop_normal : icon_tab_shop_selected
        //       }
        //       if (route.name === 'Message') {
        //         img = focused ? icon_tab_message_normal : icon_tab_message_selected
        //       }
        //       if (route.name === 'Mine') {
        //         img = focused ? icon_tab_mine_normal : icon_tab_mine_selected
        //       }
        //       return <Image style={{ width: size, height: size, tintColor: '#ff2442' }} source={img} />
        //     }
        //   }
        // }}

        // 自定义tabbar
        tabBar={props => <TabItem {...props} /> }
      >
        <BottomTab.Screen
          name='Home'
          component={Home}
          options={{
            title: '首页',
            headerShown:false
          }}
        />
        <BottomTab.Screen
          name='Shop'
          component={Shop}
          options={{
            title: '商城',
            headerShown:false
          }}
        />
        <BottomTab.Screen
          name='Publish'
          component={Shop}
          options={{
            title: '发布',
            headerShown:false
          }}
        />
        <BottomTab.Screen
          name='Message'
          component={Message}
          options={{
            title: '消息',
            headerShown:false
          }}
        />
        <BottomTab.Screen
          name='Mine'
          component={Mine}
          options={{
            title: '我的',
            headerShown:false
          }}
        />

      </BottomTab.Navigator>
    </View>

  )
}
const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%'
  }
})